<template>
  <div class="info-card membership-card">
    <h3 class="card-title">会员信息</h3>
    <div class="card-content">
      <el-descriptions :column="2" size="small" border>
        <el-descriptions-item label="会员状态">
          <el-tag :type="getMembershipTagType(customerData.customer_status)">
            {{ customerData.customer_status_name || '未设置' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="客户等级">
          {{ customerData.customer_level_name || '未设置' }}
        </el-descriptions-item>
        <el-descriptions-item label="客户类型">
          <el-tag :type="customerData.customer_type === 15 ? 'info' : 'primary'">
            {{
              customerData.customer_type_name ||
              (customerData.customer_type === 15 ? '个人' : '企业')
            }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="管家">
          {{ customerData.manager_name || '未设置' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { statusService } from '@/utils/statusService'

  interface CustomerData {
    customer_id?: number
    customer_status?: string | number
    customer_status_name?: string
    customer_level?: number
    customer_level_name?: string
    customer_type?: number
    customer_type_name?: string
    manager_id?: number
    manager_name?: string
  }

  const props = defineProps<{
    customerData: CustomerData
  }>()

  // 获取会员状态标签类型
  const getMembershipTagType = (status?: string | number) => {
    if (statusService.isValidMemberStatus(status || 0)) {
      return 'success'
    } else if (statusService.isExpiredMemberStatus(status || 0)) {
      return 'warning'
    } else {
      return 'info'
    }
  }
</script>

<style scoped>
  .membership-card {
    margin-bottom: 20px;
  }

  .card-title {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }

  .card-content {
    padding: 0;
  }
</style>
